<template>
  <el-card shadow="never" :body-style="{ padding: '20px' }">
    <el-dialog
      title="微信二维码"
      :visible.sync="qrDialogVisible"
      :show-close="false"
      :close-on-press-escape="false"
      width="30%"
      align="center"
    >
      <span>
        <el-button type="text" @click="loadQrCode" v-show="!qrCodeVisible"
          >点击加载二维码</el-button
        >
        <p v-show="qrCodeVisible">请使用手机扫描二维码登录网页版微信</p>
        <img :src="qrCode" v-show="qrCodeVisible" width="200" height="200" />
      </span>
      <span slot="footer" class="dialog-footer" @click="confirmLogin">
        <el-button>确认登录</el-button>
      </span>
    </el-dialog>
    <el-container style="height: 480px;">
      <el-aside>
          <div class="friend-list" v-for="(contact, i) in contactList">
            <img :src="contact.avatar" />
          </div>
      </el-aside>
      <el-container>
        <el-main>
          <div class="contact-container" v-if="selectedContactList.length > 0">
            <div
              v-for="(selectedContact, i) in selectedContactList"
              class="contact"
            >
              <i class="el-icon-error remove-btn" @click="removeContact(i)"></i>
              <img :src="selectedContact.avatar" />
              <span class="contact-name">{{ selectedContact.remarkName }}</span>
            </div>
          </div>
          <div class="message-container">
            <i
              class="el-icon-info"
              style="position: absolute; top: 5px; right: -10px; cursor: pointer;"
              @click="loadTemplate"
            ></i>
            <textarea cols="30" rows="10" class="message"></textarea>
          </div>
          <el-button
            type="primary"
            :loading="sending"
            @click="send"
            icon="el-icon-upload"
          >
            {{ sending ? "发送中" : "发送" }}
          </el-button>
        </el-main>
      </el-container>
    </el-container>
  </el-card>
</template>

<script>
export default {
  name: "Wechat",
  data() {
    return {
      qrCode: "",
      qrDialogVisible: false,
      qrCodeVisible: false,
      sending: false,
      contactList: [
        {
          id: 10,
          remarkName: "张三",
          avatar: "https://static.dev-heaven.com/wechat/035dd8da"
        },
        {
          remarkName: "张三",
          avatar: "https://static.dev-heaven.com/wechat/035dd8da"
        },
        {
          remarkName:
            "天九共享-张三天九共享-张三天九共享-张共享-张三天九共享-张三天九共享-张三",
          avatar: "https://static.dev-heaven.com/wechat/035dd8da"
        }
      ],
      selectedContactList: [
        {
          remarkName:
            "天九共享-张三天九共享-张三天九共享-张共享-张三天九共享-张三天九共享-张三",
          avatar: "https://static.dev-heaven.com/wechat/035dd8da"
        }
      ]
    };
  },
  methods: {
    confirmLogin() {
      this.$confirm("是否已经扫码并确认登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "确认成功!"
          });
          this.qrDialogVisible = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    loadQrCode() {
      this.$http
        .get("http://127.0.0.1:8000/wx_qr_code")
        .then(res => {
          this.qrCode = res.data.data;
          //  显示二维码
          this.qrCodeVisible = true;
        })
        .catch(err => {});
    },
    loadFriends() {
      this.$confirm("该操作将耗时很长，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .get("http://127.0.0.1:8000/list_friends")
            .then(res => {
              console.log(res);
            })
            .catch(err => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    removeContact(index) {
      this.contactList.splice(index, 1);
    },
    send() {
      this.sending = true;
    },
    loadTemplate() {
      alert("加载模板");
    }
  }
};
</script>

<style scoped>
.friend-list {
  padding: 0 5px 5px 10px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.friend-list img {
  height: 35px;
  width: 35px;
  vertical-align: middle;
  border-radius: 35px;
}

.contact-container {
  width: 100%;
  padding: 0 5px 5px 0;
  border-radius: 5px;
  box-shadow: 0 0 2px 1px #16c3dd;
}

.contact {
  padding: 3px;
  position: relative;
  display: inline-block;
  margin-top: 5px;
  margin-left: 5px;
  border: 1px solid #888;
  border-radius: 3px;
}

.contact img {
  vertical-align: middle;
  float: left;
  height: 25px;
  width: 25px;
  border-radius: 25px;
}

.contact-name {
  height: 100%;
  vertical-align: middle;
  display: inline-block;
  max-width: 30em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #888;
  font-size: 12px;
  padding: 5px;
}

.message-container {
  margin-top: 20px;
  position: relative;
}

.message {
  width: 100%;
  border-radius: 5px;
  resize: none;
  padding: 5px;
  border-color: #aaa;
}

.remove-btn {
  position: absolute;
  top: -4px;
  right: -4px;
  color: #aaa;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
</style>
